<template>
  <el-container>
    <el-main>
      <!--          :data="tableData"-->
      <!--
          :data="tableData.filter((data)=>!search||data.digestText.toLowerCase().includes(search.toLowerCase()))"
-->
      <el-table
          :data="tableData"
          height="600px"
          style="width: 100%">
        <el-table-column width="500">
          <template #header>
              <label>SQL语句</label>
            <el-input v-model="search" clearable size="medium" placeholder="请输入SQL语句" />
          </template>
          <template #default="props">
            {{props.row.digestText}}
          </template>
        </el-table-column>
<!--          <el-table-column fixed prop="digestText" label="SQL语句" width="500"/>-->
        <el-table-column :sortable="$store.state.EventsDigestSort" prop="avgTimerWait" label="平均响应时间(皮秒)" width="120"/>
        <el-table-column :sortable="$store.state.EventsDigestSort" prop="sumSortRows" label="SQL排序记录次数" width="120"/>
        <el-table-column :sortable="$store.state.EventsDigestSort" prop="sumRowsExamined" label="SQL扫描次数" width="120"/>
        <el-table-column :sortable="$store.state.EventsDigestSort" prop="sumCreatedTmpTables" label="使用内存临时表" width="120"/>
        <el-table-column :sortable="$store.state.EventsDigestSort" prop="sumCreatedTmpDiskTables" label="使用磁盘临时表" width="120"/>
        <el-table-column :sortable="$store.state.EventsDigestSort" prop="sumRowsSent" label="返回结果集数" width="120"/>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import {useStore} from 'vuex';
import {computed,ref} from "vue";

export default {
  name: "Index",
  setup(props, context) {

    const store = useStore();
    //sql搜索关键字
    let search = ref('');
    //对应数据库下的表
    // const tableData = computed(() => store.state.selectEventsDigest);
    const tableData = computed(()=>{
       let table = store.state.selectEventsDigest
        if(table!=null){
          //搜索过滤
          return table.filter((data)=>!search||data.digestText.toLowerCase().includes(search.value.toLowerCase()))
        }else{
          return null;
        }
    });

    store.commit('setToggleHead','DB');


    return {
      tableData,
      search,
    }
  }
}
</script>

<style scoped>
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
  text-align: center;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>